<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件多用于商品评价打分、服务态度评价、用户满意度等场景。
		</demo-desc>
		
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-rate v-model="rateValue" @change="onChange" />
			</view>
		</fu-section>
		
		<fu-section title="不支持滑动手势选择评分" customClass="fu-m-t-20" type="line">
			<view slot="desc">设置 touchable 属性控制是否开启手势选择</view>
			<view class="fu-m-t-20">
				<fu-rate :touchable="false" :value="5" @change="onChange" />
			</view>
		</fu-section>
		
		<fu-section title="自定义选中星星数量" customClass="fu-m-t-20" type="line">
			<view slot="desc">设置 max 属性控制组件最大星星数量</view>
			<view class="fu-m-t-20">
				<fu-rate :value="5" :max="10"></fu-rate>
			</view>
		</fu-section>
		
		<fu-section title="自定义星星大小" customClass="fu-m-t-20" type="line">
			<view slot="desc">设置 size 属性控制组件大小</view>
			<view class="fu-m-t-20">
				<fu-rate :value="5" size="18"></fu-rate>
			</view>
		</fu-section>
		
		<fu-section title="设置星星间隔" customClass="fu-m-t-20" type="line">
			<view slot="desc">设置 margin 属性控制星星间隔</view>
			<view class="fu-m-t-20">
				<fu-rate :value="4" margin="20"></fu-rate>
			</view>
		</fu-section>
		
		<fu-section title="是否只读评分" customClass="fu-m-t-20" type="line">
			<view slot="desc">使用 readonly 属性设置组件只读</view>
			<view class="fu-m-t-20">
				<fu-rate :readonly="true" :value="2"></fu-rate>
			</view>
		</fu-section>
		
		<fu-section title="禁用状态" customClass="fu-m-t-20" type="line">
			<view slot="desc">使用 disabled 属性设置组件禁用</view>
			<view class="fu-m-t-20">
				<fu-rate :disabled="true" disabledColor="#ccc" :value="3"></fu-rate>
			</view>
		</fu-section>
		
		<fu-section title="自定义星星颜色" customClass="fu-m-t-20" type="line">
			<view slot="desc">使用 color 属性设置星星颜色</view>
			<view class="fu-m-t-20">
				<fu-rate color="#bbbbbb" active-color="#31E749" inactiveColor=""></fu-rate>
			</view>
		</fu-section>
		
		<fu-section title="是否允许半星" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-rate :value="0.5" activeColor="#2979ff" allowHalf></fu-rate>
			</view>
		</fu-section>
		
		<fu-section title="未选中的星星为镂空状态" customClass="fu-m-t-20" type="line">
			<view slot="desc">使用 is-fill 属性设置星星镂空</view>
			<view class="fu-m-t-20">
				<fu-rate :value="3" :is-fill="false"></fu-rate>
			</view>
		</fu-section>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';

	// data数据
	let rateValue = ref(0);
	
	// 生命周期
	onLoad(() => {
		// 模拟动态赋值
		setTimeout(() => {
			rateValue.value = 3
		}, 300)
	});
	
	// methods方法
	const onChange = (e) => {
		console.log('rate发生改变:' + JSON.stringify(e))
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>